import ajax from '../../../until/request.js'

import { goRmd, searchValue, top } from '../../public/js/public.js'
class Search {
  constructor() {
    this.getDoms()
    this.searchData()
    this.searchTable()
    this.SortData()
    this.toRmd()
    top()
  }
  getDoms () {
    this.search = document.querySelector('.search')
    this.searchValue = sessionStorage.getItem("search_value")
    // 获取table
    this.table = document.querySelector('.table')
    // 获取渲染对象
    this.searchList = document.querySelector('.box-panel')
    this.emData = document.querySelectorAll("em")
    // 获取  userInfo
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
  }
  // 请求数据
  searchData () {
    // 请求数据 
    ajax.getPro({
      url: 'http://localhost:8888/goods/list',
      params: {
        search: this.searchValue,
        pagesize: 1000, // 每页多少条数据
      }
    }).then(res => {
      this.render(JSON.parse(res).list)
    })
  }
  // 封装渲染 函数  渲染 首页 数据                         
  render (data) {
    // 生成 商品数据
    let box_items = data.map(item => {
      return `
      <a class="box-item" href="../detail/hot_rmd.html" data-id="${item.goods_id}" >
      ${item.is_hot ? '<div class="is_hot">热门</div>' : ""}
      ${item.is_sale ? `<div class="is_sale">${item.sale_type}</div>` : ""}
      <img src=${item.imgSmall_logo} alt="">
      <div class="title">${item.title}</div> 
      <div class="current_price">¥${item.current_price} &nbsp;<span class="price">${item.price}</span> </div>
      </a>`
    })
    // console.log(box_items)
    this.searchList.innerHTML = box_items.join("")
  }
  // 当点击的是table 上面的数据
  searchTable () {
    this.table.addEventListener("click", (e) => {
      let target = e.target
      if (target.nodeName == "A") {
        let aText = target.innerText
        this.searchValue = aText
        console.log(this.searchValue)
        this.searchData()
      }

    })
  }
  // 当点击  排序按钮
  SortData () {
    this.emData.forEach(item => {
      item.addEventListener("click", (e) => {
        let target = e.target.innerText
        //切换iconfont  
        if (item.children[0].classList.contains("icon-jiantou_xiangshang_o")) {
          item.children[0].classList.remove("icon-jiantou_xiangshang_o")
          item.children[0].classList.add("icon-jiantou_xiangxia_o")

          if (target == "价格") {
            this.sortType("price", "DESC")
          }
          if (target == "折扣") {
            this.sortType("sale", "DESC")
          }
        } else {
          item.children[0].classList.add("icon-jiantou_xiangshang_o")
          item.children[0].classList.remove("icon-jiantou_xiangxia_o")
          if (target == "价格") {
            this.sortType("price", "ASC")
          }
          if (target == "折扣") {
            this.sortType("sale", "ASC")
          }
        }
      })
    })

  }

  // 排序函数 
  sortType (sortType, sortMethod) {

    ajax.getPro({
      url: 'http://localhost:8888/goods/list',
      params: {
        pagesize: 1000, // 每页多少条数据 
        search: this.searchValue, // 搜索条件
        sortType: sortType, // 排序类型
        sortMethod: sortMethod
      }
    }).then(res => {
      this.renderSort(JSON.parse(res).list)
    })

  }
  //
  renderSort (renderData) {
    let box_items = renderData.map(item => {
      return `
      <a class="box-item" href="../detail/hot_rmd.html?id=${item.goods_id}" data-id="${item.goods_id}" >
      ${item.is_hot ? '<div class="is_hot">热门</div>' : ""}
      ${item.is_sale ? `<div class="is_sale">${item.sale_type}</div>` : ""}
      <img src=${item.imgSmall_logo} alt="">
      <div class="title">${item.title}</div> 
      <div class="current_price">¥${item.current_price} &nbsp;<span class="price">${item.price}</span> </div>
      </a>`
    })
    // console.log(box_items)
    this.searchList.innerHTML = box_items.join("")
  }
  // 点击 跳转 详情页
  toRmd () {
    this.goRmd = goRmd
    this.goRmd()
  }
  //搜索功能
  searchValue () {
    this.searchValue = searchValue
    this.searchValue()
  }
}


let search = new Search()

export default search